{% extends "base.html" %}
{% block content %}
{% load static %}
<link href="{% static 'css/device_list.css' %}" type="text/css" rel='stylesheet' />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58" crossorigin="anonymous"></script>

<div class="dev_post" style="border-radius:4px ; border: 1px solid #ccc ; background-color:#F5F5F5;">
  <h4 class="mt-1" style="text-align:center">添加设备</h4>
<!--  <h4 class="mt-1" style="text-align:center">修改设备信息</h4>-->
    <form method="post"> <!--需要使用method post方法-->
    {% csrf_token %} <!--django post方法需要加上csrf_token-->
      <div class="mb-2">
        <label for="exampleInputEmail1" class="form-label">IP地址：</label>
        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="ip" placeholder="not null">
    <!--    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>-->
      </div>
      <div class="mb-2">
        <label for="exampleInput1" class="form-label">主机名：</label>
        <input type="text" class="form-control" id="exampleInput1" name="hostname" placeholder="not null">
      </div>
      <div class="mb-2">
        <label for="exampleInput2" class="form-label">用户名：</label>
        <input type="text" class="form-control" id="exampleInput2" name="username" placeholder="not null">
      </div>
      <div class="mb-2">
        <label for="exampleInput3" class="form-label">密码：</label>
        <input type="text" class="form-control" id="exampleInput3" name="pwd" placeholder="number">
      </div>
      <div class="mb-2">
        <label for="exampleInputPassword1" class="form-label">端口：</label>
        <input type="text" class="form-control" id="exampleInputPassword1" name="port" placeholder="number">
      </div>
      <label for="exampleInputPassword1" class="form-label">设备厂商</label>
      <select class="form-select" aria-label="Default select example" name="vendor">
        <option selected>--------</option>
        <option value="huawei">华为</option>
        <option value="cisco">Cisco</option>
      </select><br>
      <input type="hidden" name="id" value="Post_info">
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
</div>

<div class="dev_body">
    <h1 class="mt-2" style="text-align:center">设备列表</h1>
        <form method="post">  <!--action="href"-->
        {% csrf_token %}
        <table class="table table-hover">
          <thead style="text-align:center"><tr class="table-primary">
              <th scope="col">ID</th>
              <th scope="col">IP地址</th>
              <th scope="col">主机名</th>
              <th scope="col">厂商</th>
              <th scope="col" width="150px">详细信息</th>
              <th scope="col" width="120px">Delete!</th>
          </tr></thead>
          <tbody style="text-align:center ; line-height:40px">
          {% for device in Devices %}
            <tr class="table-info">
            <td>{{device.id}}</td>
            <td>{{device.ip_address}}</td>
            <td>{{device.hostname}}</td>
            <td>{{device.vendor}}</td>
            <td>&nbsp<a href="http://127.0.0.1:8000/dev_list/{{ device.id }}" class="btn btn-primary">编辑</a></td>
            <td><!--删除按钮，data-target绑定弹出框id-->
              <button id="delete{{device.id}}" class="btn btn-danger" data-toggle="modal" data-target="#myModal">删除</button>
            </td>
            </tr>
                <script>
                  $(function () {
                    $('#delete{{device.id}}').on('click', function (){
                        ip = '{{device.ip_address}}'
                        id = '{{device.id}}'
                        $('#mymodal').modal('show');
                    });
                    $('#mymodal').on('shown.bs.modal', function (){
                      var modal = $(this);
                      modal.find('.modal-body #ip_address').text('是否删除'+ip+'?');
                      $("#id").attr("value",id);
                    });
                });
                </script>
          {% endfor %}
          </tbody>
        </table>
        </form>
</div>

<div class="modal" id="mymodal" style="background-color: rgba(0,0,0,0.3) !important;" data-backdrop="false">
<!--data-backdrop设置div透明背景-->
<div class="modal-dialog">
    <div class="modal-content" style="margin-top:50% ; background-color: rgba(0,.0001) !important;">
        <div class="modal-header">
            <button type="button" class="btn btn-default" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
<!--                                <h5 class="modal-title">删除设备</h5>-->
        </div>
        <div class="modal-body" style="text-align:center;">
            <div id="ip_address" style="font-size:20px"></div>
            <div style="color:red ; line-height:20px ; margin-bottom:12px ; font-size:18px;">此操作无法撤回</div>
        </div>
        <div class="modal-footer">

            <form action="" method="post">
            {% csrf_token %}
            <input type="hidden" name="id" id="id" value="">
<!--                                将前端form表单第一个input框隐藏，填入指定删除的ip地址的id，提交按钮类型为submmit-->
            <button class="btn btn-danger" name="id2" style="margin-right:15px">删除</button>
<!--                                    再在Django views.py中post请求获取name="id"的值，得到value中的值-->
            <button type="button" class="btn btn-default" data-dismiss="modal" style="background-color:rgba(0,0,0,0.1) !important">取消</button>
            </form>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--{% for device in Devices %}-->
<!--<script>-->
<!--  //$(function () {-->
<!--    //$('#delete{{device.id}}').on('click', function (){-->
<!--        //ip = '{{device.ip_address}}'-->
<!--        //id = '{{device.id}}'-->
<!--        //$('#mymodal').modal('show');-->
<!--    //});-->
<!--    //$('#mymodal').on('shown.bs.modal', function (){-->
<!--      //var modal = $(this);-->
<!--      //modal.find('.modal-body #ip_address').text('是否删除'+ip+'?');-->
<!--      //$("#id").attr("value",id);-->
<!--    });-->
<!--});-->
<!--</script>-->
<!--{% endfor %}-->
<!--<script>-->
<!--  //$(function () {-->
<!--    //$('#delete{{device.id}}').on('click', function Delete(test){-->
<!--        //ip = '{{device.ip_address}}'-->
<!--        //id = '{{device.id}}'-->
<!--        //a = $(test).attr -->
<!--        //$('#mymodal').modal('show');-->
<!--    //});-->
<!--    //$('#mymodal').on('shown.bs.modal', function (){-->
<!--      //var modal = $(this);-->
<!--      //modal.find('.modal-body #ip_address').text('是否删除'+ip+'?');-->
<!--      //$('#id').val(id)-->
<!--      //$("#id").attr("value",id);-->
<!--      //document.getElementById('id').value = id-->
<!--    //});-->
<!--//});-->
<!--</script>-->
{% endblock %}
